/* eslint-disable no-console */
import { ThemeManager } from '../settings/theme-manager.js';
import { ThemeUtils } from '../settings/theme-utils.js';

// ================================ 用户设置 ================================
(function ($) {
    const settingsModalSelect = '#settings-modal'
    const $settingsModal = $(settingsModalSelect)


    // ================================ 快捷键 ================================
    const keysPressed = {};     // 存储按键状态

    // 监听键盘按下事件
    $(document).on('keydown', (e) => {
        keysPressed[e.key.toLowerCase()] = true;

        // 检查是否同时按下了 Ctrl 和 Q
        if (keysPressed.control && e.key.toLowerCase() === 'q') {
            e.preventDefault(); // 阻止浏览器默认行为

            // 获取模态框当前状态
            const isShown = $settingsModal.hasClass('show') || $settingsModal.css('display') === 'block';

            // 切换模态框状态
            if (isShown) {
                $settingsModal.modal('hide');
            } else {
                $settingsModal.modal('show');
            }
        }
    });

    // 监听键盘释放事件
    $(document).on('keyup', (e) => {
        keysPressed[e.key.toLowerCase()] = false;
    });

    // ================================ 选项卡导航 ================================
    const tabActiveStyle = {
        'border-bottom': '2px solid #ff0000', // 红色底部线
    };

    /**
     * 更新选项卡导航样式
     * @param {boolean} [highLight] - 是否高亮当前选中项
     */
    function updateTabStyles(highLight = true) {
        const $settingsTabsNavLink = $('#settingsTabs .nav-link');
        $settingsTabsNavLink.css({
            'border-bottom': '', // 移除所有底部线样式
            'color': window.getSettingsFromUserSettings('colorTheme', 'radio') === true ?  '#c6c9cf': '#000000', // 设置颜色
        });
        if (!highLight) return;
        $('#settingsTabs .nav-link.active').css(tabActiveStyle);
    }

    /**
     * 监听选项卡导航点击事件
     */
    $('#settingsTabs a[data-toggle="tab"]').on('show.bs.tab', function() {
        updateTabStyles(false);

        // 为当前点击项添加红色底部线
        $(this).css(tabActiveStyle);
    });

    /**
     * 初始化选项卡导航样式
     */
    function initTabStyles() {
        updateTabStyles();
    }

    // 初始化时应用样式
    initTabStyles();

    // ================================ 显示模式 ================================
    const $displayMode = $('input[name="displayMode"]');
    const $mainContent = $('.main-content');
    const $headerBig = $('.header-big');

    /**
     * 切换页面元素的显示/隐藏状态
     * @param {boolean} [show] - 是否显示元素（默认显示）
     * @param {number|string} [speed] - 可选动画速度（毫秒、slow、fast）
     * @param {Function} [callback] - 可选动画完成回调函数
     */
    function toggleElements(show = true, speed, callback) {
        // 统一处理的选择器集合（按功能分组）
        const elements = {
            // 导航相关元素
            nav: ['#sidebar', '.sidebar-nav-inner'],
            // 折叠按钮
            buttons: ['.header-mini-btn', '.menu-item-has-children'],
            // 主要内容区域
            content: ['#content'],
            // 页脚
            footer: ['.main-footer'],
            // 通知消息
            notifications: ['#bulletin_box .card-body'],
        };

        // 合并所有选择器
        const allSelectors = Object.values(elements).flat();

        // 根据参数选择显示或隐藏方法
        const method = show ? 'show' : 'hide';

        // 统一应用操作（支持动画参数）
        $(allSelectors.join(',')).each(function() {
            const $el = $(this);
            if (typeof speed !== 'undefined') {
                $el[method](speed, callback);
            } else {
                // 如果是强制隐藏，则使用自定义的隐藏类
                if (!show) {
                    $el.addClass('force-hide')
                } else {
                    $el[method]();
                    $el.removeClass('force-hide')
                }
            }
        });
    }

    /**
     * 更新页面样式以适应极简模式
     */
    function updateStyle() {
        const $sidebar = $('.sidebar-nav');
        $sidebar.css('width', '');
        $sidebar.parent().css('width', 'auto');

        $mainContent.parent().css({
            'display': 'grid',
            'grid-template-columns': '1fr',  // 单列自适应
            'place-items': 'center',
            'height': '100vh'
        });
        $mainContent.css({
            'width': '100%',  // 最大宽度
            'height': '100%',
            'margin-left': '0',
        });
        $headerBig.css({
            'padding-bottom': '250px',
        });
        $('#search-bg, .s-search, #search').css('height', '100%');
        $('.navbar-expand-md, #search').css('width', '100%');
        $('#search').css({
            'margin-left': '100px !important',
            'margin-right': '100px !important',
        });
        $('#search-text').css({
            'height': '100%',
            'flex': '1',
            'max-width': '100%',
            'font-size': '18px',
        })
        $('.super-search-fm').css({
            'display': 'flex',
            'max-height': '100%',
            'max-width': '100%',
            'justify-content': 'center',
            'align-items': 'center',
        })
    }

    /**
     * 恢复页面样式为标准模式
     */
    function recoveryStyle() {
        $('.page-container').css('width', '');
        $('.sidebar-nav').css('width', '220px');
        $mainContent.parent().css({
            'display': 'flex',
            'grid-template-columns': '',
            'place-items': '',
            'height': ''
        });
        $mainContent.css({
            'width': '',
            'height': '',
            'margin-left': '',
        });
        $headerBig.css({
            'padding-bottom': '50px',
        });
        $('#search-bg, .s-search, #search').css('height', '');
        $('#search').css('padding-bottom', 0);
        $('.navbar-expand-md, #search').css('width', '');
        $('#search-text').css({
            'flex': '',
            'max-width': '',
            'font-size': '',
        })
        $('.super-search-fm').css({
            'display': 'block',
            'height': '',
            'width': '',
            'justify-content': '',
            'align-items': '',
        });
    }

    /**
     * 更新显示模式样式
     * @param {boolean} minimalMode - 是否为极简显示模式（true 或 false）
     */
    function updateDisplayModeStyle(minimalMode) {
        if(minimalMode === true) {
            $('.display-minimal-mode').removeClass('btn-primary').removeClass('btn-light').addClass('btn-primary');
            $('.display-standard-mode').removeClass('btn-primary').removeClass('btn-light').addClass('btn-light');
        } else {
            $('.display-minimal-mode').removeClass('btn-primary').removeClass('btn-light').addClass('btn-light');
            $('.display-standard-mode').removeClass('btn-primary').removeClass('btn-light').addClass('btn-primary');
        }
    }

    /**
     * 更新显示模式选中状态（页面）
     * @param {boolean} minimalMode - 是否为极简显示模式（true 或 false）
     */
    function updateDisplayModeCheckStatus(minimalMode) {
        if(minimalMode === true) {
            $('#display-minimal-mode').prop('checked', true);
            $('#display-standard-mode').prop('checked', false);
        } else {
            $('#display-minimal-mode').prop('checked', false);
            $('#display-standard-mode').prop('checked', true);
        }
    }

    const searchSettings = {
        normal: {
            searchBoxSize: 60,
            searchBoxWidth: 100,
            searchBoxHeight: 0
        },
        minimal: {
            searchBoxSize: null,
            searchBoxWidth: null,
            searchBoxHeight: null
        },
        empty: {
            searchBoxSize: null,
            searchBoxWidth: null,
            searchBoxHeight: null
        }
    };
    /**
     * 更新搜索框元素（页面）
     * @param {boolean} minimalMode - 是否为极简显示模式（true 或 false）
     */
    function setSearchElement(minimalMode) {
        const $elements = {
            size: $('input[name="searchBoxSize"]'),
            width: $('input[name="searchBoxWidth"]'),
            height: $('input[name="searchBoxHeight"]')
        };

        // 保存当前设置（如果是从极简模式切换到普通模式）
        if (Object.values(searchSettings.minimal).every(val => val === null)) {
            searchSettings.minimal = {
                searchBoxSize: $elements.size.val(),
                searchBoxWidth: $elements.width.val(),
                searchBoxHeight: $elements.height.val()
            };
        }

        // 设置值
        const settings = minimalMode ? searchSettings.minimal : searchSettings.normal;
        Object.entries(settings).forEach(([key, value]) => {
            if (value !== null) {
                $elements[key.slice(9).toLowerCase()] // 从 searchBoxSize 转为 size
                    .val(value)
                    .trigger('change');
            }
        });

        // 重置存储的设置（如果从普通模式切换回极简模式）
        if (minimalMode) {
            searchSettings.minimal = { ...searchSettings.empty };
        }

        // 设置禁用状态
        const disabled = !minimalMode;
        Object.values($elements).forEach($el => $el.prop('disabled', disabled));
    }

    /**
     * 处理显示开关、隐藏开关
     */
    function setSwitchElement(state) {
        Object.keys(window.switchConfigs.show).forEach((name) => {
            // 自动切换壁纸、显示壁纸切换按钮、热门网站、一言，不处理
            if (['autoSwitchWallpaper', 'showWallpaperButtons', 'showPopularSites', 'showYiYan'].includes(name)) return;
            window.toggleSwitch(name, !state);
            window.toggleElementsWithSettings(name, !state);
        })
        Object.keys(window.switchConfigs.hide).forEach((name)  => {
            if (['hideSearchBox', 'hideSearchCategories', 'hideSearchButton'].includes(name)) {
                window.toggleSwitch(name, false);
                window.toggleElementsWithSettings(name, false);
            } else {
                window.toggleSwitch(name, state);
                window.toggleElementsWithSettings(name, state);
            }
        })
    }

    /**
     * 切换显示模式
     */
    function toggleDisplayMode(){
        const minimalMode = window.getSettingsFromUserSettings('displayMode', 'radio');
        // 初始化元素显示状态
        toggleElements(!minimalMode);
        minimalMode === true ? updateStyle() : recoveryStyle();
        // 更新显示模式样式到本地存储中
        window.AppUtils.updateLocalStorage('userSettings', {'displayMode': minimalMode? 'minimal' : 'standard'});
        // 更新显示模式的激活样式
        updateDisplayModeStyle(minimalMode);
        // 更新搜索框
        setSearchElement(minimalMode);
        // 更新开关
        setSwitchElement(minimalMode);
    }

    /**
     * 监听显示模式切换事件
     */
    $displayMode.on('change', () => {
        toggleDisplayMode()
    });

    /**
     * 初始化显示模式
     */
    function initDisplayMode() {
        toggleDisplayMode();
        updateDisplayModeCheckStatus(window.getSettingsFromUserSettings('displayMode', 'radio'));
    }

    // ================================ 风格模式 ================================
    const $colorTheme= $('input[name="colorTheme"]');

    function switchDarkMode(){
        document.documentElement.dataset.theme ='dark';
        document.body.classList.toggle('io-grey-mode', false);
        document.body.classList.toggle('io-black-mode', true);
    }

    function switchLightMode(){
        document.documentElement.dataset.theme ='light';
        document.body.classList.toggle('io-grey-mode', true);
        document.body.classList.toggle('io-black-mode', false);
    }

    function toggleColorTheme() {
        const dark = window.getSettingsFromUserSettings('colorTheme', 'radio');
        dark === true ? switchDarkMode() : switchLightMode();
        window.AppUtils.updateLocalStorage('userSettings', {'colorTheme': dark === true ? 'dark' : 'light'});
        // 更新首次加载的壁纸图
        if (window.isInitialLoad) {
            $('.page-container .grid-bg').css({
                'background-image':
                    'linear-gradient(rgba(50, 0, 0, 0.05) 1px, transparent 0), ' +
                    'linear-gradient(90deg, rgba(50, 0, 0, 0.05) 1px, transparent 0)',
            });
        }
    }

    /**
     * 更新风格模式选中状态（页面）
     * @param {boolean} darkMode - 是否为深色模式（true 或 false）
     */
    function updateColorThemeCheckStatus(darkMode) {
        if(darkMode === true) {
            $('#light-theme').prop('checked', false);
            $('#dark-theme').prop('checked', true);
        } else {
            $('#light-theme').prop('checked', true);
            $('#dark-theme').prop('checked', false);
        }
    }


    /**
     * 更新默认主题值并应用到页面上
     */
    function applyDefaultTheme() {
        const dark = window.getSettingsFromUserSettings('colorTheme', 'radio');
        const currentTheme =  window.AppUtils.getUserSettings()?.currentTheme;
        // 当前主题为空时，根据当前风格模式设置默认主题
        if (!currentTheme || ThemeManager.defaultThemes.includes(currentTheme) ) {
            const defaultTheme = ThemeManager.getDefaultTheme(dark === true);
            window.AppUtils.updateLocalStorage('userSettings', {'currentTheme': defaultTheme});
            ThemeManager.applyTheme(defaultTheme, true);
        }
    }

    /**
     * 监听风格模式切换事件
     */
    $colorTheme.on('change', () => {
        toggleColorTheme()
        updateTabStyles();
        applyDefaultTheme();
    });

    /**
     * 初始化风格模式
     */
    function initColorTheme() {
        toggleColorTheme();
        updateColorThemeCheckStatus(window.getSettingsFromUserSettings('colorTheme', 'radio'));
    }

    // ================================ 初始化 ================================
    /**
     * 初始化用户设置
     */
    function initUserSettings() {
        initDisplayMode();
        initColorTheme();
        window.initSwitch();
        window.initRange();
        window.initSelect();
        ThemeUtils.initColor();
        window.initTheme();
        window.isInitialLoad = false;
    }

    initUserSettings();
})(window.jQuery);